<template>
  <div class="app-container" v-loading="loading">
    <el-form ref="form" :model="form" :rules="rules" label-width="90px">
      <el-form-item label="产品" prop="productId">
        <el-select v-model="form.productId" placeholder="请选择产品" clearable @change="handleProduct">
          <el-option v-for="(item,index) in accountBack" :key="index" :label="item.productName==='招商银行'?'银行':item.productName" :value="item.productId"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="提现账号" prop="withdrawalId">
        <el-select v-model="form.withdrawalId" placeholder="请选择提现账号" clearable>
          <el-option v-for="(item,index) in withdrawalAccountList" :key="index" :label="item.name" :value="item.id">
            <span style="float: left">
              {{ item.name }} ({{item.backName}})
            </span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.backType===1?"个人":item.backType===2?"对公":'' }}</span>
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="账户余额" prop="amount">
        {{userBalance?userBalance:0}}元
      </el-form-item>
      <el-form-item label="冻结金额" prop="amount">
        {{freezeBalance?freezeBalance:0}}元
      </el-form-item>

      <el-form-item label="可提现金额" prop="amount">
        {{handleAmount()}}元
      </el-form-item>
      <el-form-item label="提现金额" prop="amount">
        <el-input-number v-model="form.amount" :min="0" :precision="2" label="请输入提现金额"></el-input-number>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
      </el-form-item>
    </el-form>

    <div class="dialog-footer">
      <el-button type="primary" @click="submitForm">提交</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </div>
</template>
<script>
import store from "@/store";
import { getBalance } from "@/api/transfer/productBalance";
import { separateSumIsInvoicing } from "@/api/transfer/separate";
import { addWithdrawalOrder } from "@/api/withdrawal/withdrawalOrder";
import { listWithdrawalAccount } from "@/api/withdrawal/withdrawalAccount";
import { listProductOrganizations } from "@/api/product/productOrganizations";

export default {
  name: 'withdrawal',
  data() {
    return {
      loading:false,
      accountBack:[],
      userBalance:0,
      freezeBalance:0,
      withdrawalAccountList:[],
      form:{
        amount:0,
        productId:null,
        withdrawalId:null,
      },
      rules:{

      },
      organizationType: store.getters.organizationType,
    };
  },
  mounted() {
    this.loading = true;
    listProductOrganizations().then(res=>{
      this.accountBack = res.rows
    })

    listWithdrawalAccount({}).then(response => {
      this.withdrawalAccountList = response.rows;
      this.total = response.total;
      this.loading = false;
    });


  },
  created() {

  },
  methods:{
    handleProduct(val) {

      let params = {
        params:{},
        productId:val,
      }
      this.loading = true
      getBalance(params).then(res=>{
        this.userBalance = res.data?res.data:0
      })

      params.params.isInvoicingIn = [0,2]

      separateSumIsInvoicing(params).then(res=>{
        this.freezeBalance = res.data?res.data:0
        this.loading = false
      })
    },

    handleAmount(){
      let amount = this.userBalance - this.freezeBalance
      if (amount > 0){
        amount = amount.toFixed(2);
        this.maxBalance = amount-0;
        return this.maxBalance;
      }else{
        this.maxBalance = 0;
        return 0;
      }
    },

    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.amount<0.1){
            this.$modal.msgWarning("提现金额不能低于0.1元");
            return;
          }
          this.loading = true
          addWithdrawalOrder(this.form).then(() => {
            this.loading = false
            this.$modal.msgSuccess("提交成功");
            this.cancel();
          }).catch(() => {
            this.loading = false
          });
        }
      })
    },
    cancel(){
      this.$emit("handleCancel")
    }
  },
}
</script>
<style scoped lang="scss">
.app-container{
  position: relative;
}
.el-form{
  margin-bottom: 55px;
}
.dialog-footer{
  left: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  height: 55px;
  padding: 10px 20px;
  position: absolute;
  justify-content: flex-end;
  background-color: #ffffff;
}

</style>
<style>
  .el-dialog__body{
    padding-top: 0;
  }
</style>
